<template>
  <div class="side" style="width: 100%; height: 100%;">
    <a-layout has-sider style="display: flex; width: 100%; min-height: 100%;">
      <a-layout-sider
          :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: '70px', top: 0, bottom: 0 }"
          style="padding: 0 10px; border-right: #eeeeee solid 1px"
          theme="light"
          class="sider"
          width="250px"
      >
        <div class="logo">
          <p style="margin: 0;">{{ program.name }}</p>
        </div>
        <hr/>
        <a-menu v-model:selectedKeys="selectedKeys" theme="light" mode="inline">
          <a-menu-item key="1" @click="showAllApis">
            <component is="controlOutlined"/>
            <span class="nav-text">接口总览</span>
          </a-menu-item>
          <!--根目录-->
          <a-sub-menu key="2">
            <template #title>
              <span class="catalog" style="display: flex; align-items: center;">
                <component is="FolderOutlined"/>
                <span class="nav-text">根目录</span>
              </span>
            </template>
            <!--新建目录-->
            <a-menu-item>
              <a-button type="text" @click="addCatalog"> + 新建目录</a-button>
            </a-menu-item>
            <a-sub-menu :key="catalog.id" v-for="catalog in data">
              <template #title :key="catalog.id">
                <span class="catalog" style="display: flex; align-items: center;">
                  <a-popover placement="left" trigger="click">
                    <template #content style="width: 5px;">
                      <a-button @click="changeName(catalog.id)">修改名称</a-button>
                      <br/>
                      <br/>
                      <a-popconfirm
                          title="该目录下的所有接口都将被删除"
                          ok-text="确认"
                          cancel-text="取消"
                          @confirm="confirmDelete(catalog.id)"
                      >
                      <a-button danger>删除目录</a-button>
                    </a-popconfirm>
                    </template>
                    <component is="SettingOutlined"/>
                  </a-popover>
                  <span class="nav-text">{{ catalog.name }}</span>
                </span>
              </template>
              <!--新建接口-->
              <a-menu-item :key="`addApi${catalog.id}`">
                <a-button type="text" @click="addApi(catalog.id)"> + 新建接口</a-button>
              </a-menu-item>
              <!--接口信息-->
              <a-menu-item v-for="api in catalog.apis" :key="api.id" class="api" @click="showDetail(api.id)">
                <span :style="methodColor[api.method]" style="padding-right: 3px;"> {{ api.method }} </span>
                <span> {{ api.name }} </span>
              </a-menu-item>
            </a-sub-menu>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="width: 100%; height: 100%; margin-left: 260px;">
        <a-layout-content style="height: 100%;">
          <router-view @refresh="getCatalogs"/>
        </a-layout-content>
      </a-layout>
    </a-layout>
    <a-modal v-model:open="openCatalogAdd" width="600px" destroy-on-close="destroy-on-close"
             cancel-text="取消" ok-text="确认"
             @ok="handlerOk"
    >
      <div style="margin: 20px 0;">
        <h3>新增目录</h3>
      </div>
      <a-form :model="formState">
        <a-form-item
            label="目录名称"
            name="name"
            :rules="[{ required: true, message: '目录名称不能为空' }]"
        >
          <a-input v-model:value="formState.name"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
  <a-modal v-model:open="changeNameOpen" title="修改名称" cancel-text="取消" ok-text="确认"
           destroy-on-close  @ok="handlerNameOk">
    <a-input :status="catalogNeedChange.name.trim().length <= 0? 'error' : ''" v-model:value="catalogNeedChange.name" />
  </a-modal>
</template>
<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue';
import {message} from "ant-design-vue";
import {useRoute} from "vue-router";
import axios from "@/axios";
import router from "@/router";

const changeNameOpen = ref(false)
//被修改名称的目录
const catalogNeedChange = ref({
  name: '',
  id:''
});

type Data = [
  catalog: {
    id: string,
    name: string,
    apis: [
      {
        id: string,
        name: string,
        url: string,
        method: string,
        requestParams: string,
        responseData: string
      }
    ]
  }
]

let data = reactive<Data>([])

const program = ref({
  id: '',
  name: '',
  description: '',
  role: ''
})

const changeName =(catalogId)=>{
  // console.log(catalogId)
  catalogNeedChange.value.id = catalogId
  changeNameOpen.value = true
}

//修改目录名称
const handlerNameOk = () => {
  const name = catalogNeedChange.value.name.trim();
  // console.log(name)

  if (name.length === 0) {
    message.error("名称不可为空")
    return
  }
  catalogNeedChange.value.name = name;
  axios.put(`/catalog/${programId}`, catalogNeedChange.value).then((response: any) => {
    message.success(response.message)
    changeNameOpen.value = false;
    getCatalogs();
  })
}
// 获取项目ID
const route = useRoute();

const programId = route.params.id;

interface FormState {
  name: string
}

const formState = reactive<FormState>({
  name: ''
});

const openCatalogAdd = ref(false);
const addCatalog = () => {
  openCatalogAdd.value = true;
  getCatalogs();
  formState.name = ''
}

onMounted(() => {
  getCatalogs()
  getData()
})
//获取项目的所有信息主要是使用名字
const getData = () => {
  axios.get(`/program/${programId}`).then((response: any) => {
    program.value = response.data;
  })
}

//删除目录，使用目录ID
const confirmDelete = (catalogId) => {
  // console.log(catalogId);
  axios.delete(`/catalog/${programId}`, {
    params: {
      catalogId: catalogId
    }
  }).then((response) => {
    message.success(response.message);
    getCatalogs();
  })
}
const handlerOk = () => {
  if (formState.name.trim().length <= 0) {
    message.warn("目录名称不能为空")
    formState.name = formState.name.trim();
    return
  } else {
    // 发送请求添加目录
    axios.post(`/catalog/${programId}`, formState).then((response) => {
      message.success(response.message);
      // 刷新目录数据
      getCatalogs();
    })
    // 关闭对话框
    openCatalogAdd.value = false;
    // 清除目录名称
    formState.name = '';
  }
}

const showAllApis = () => {
  router.push(`/program/api/all/${programId}`)
}

const showDetail = (apiId: string) => {
  router.push({
    path: `/program/api/show/${programId}`,
    query: {
      apiId: apiId
    }
  })
}

const getCatalogs = () => {
  axios.get(`/catalog/${programId}`).then((response) => {
    data = response.data;
    console.log(data)
  })
}

// 添加接口
const addApi = (catalogId: number) => {
  console.log(catalogId);
  router.push({
    path: `/program/api/add/${programId}`,
    query: {catalogId: catalogId}
  })
}

const methodColor = {
  GET: {
    color: '#fa8c16'
  },
  POST: {
    color: '#4caf50'
  },
  DELETE: {
    color: '#fa541c'
  },
  PUT: {
    color: '#1890ff'
  }
}

const selectedKeys = ref<string[]>(['1']);
</script>

<style scoped>

.side {
  .logo {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 25px;
    height: 50px;
  }

  .catalog {

  }
}

</style>
